<template>
  <div class="editDialog">
    <div class="top-title">
      <span>Edit</span>
      <span class="close" @click="cancel"><i class="el-icon-close"></i></span>
    </div>
    <div class="content">
      <el-form ref="form" :model="form" label-width="150px">
        <el-form-item label="Norad Num">
          <el-input v-model="form.noradNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="Satellite Name">
          <el-input v-model="form.satelliteCode" disabled></el-input>
        </el-form-item>
        <el-form-item label="Inclination">
          <el-input v-model="form.inclination"></el-input>
        </el-form-item>
        <el-form-item class="line-item">
          <template #label>
            <div class="label-item">
              longitude of<br /> Ascending Node
            </div>
          </template>
          <el-input v-model="form.ascendingLongitude"></el-input>
        </el-form-item>
        <el-form-item label="Eccentricity">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="Perigee Argument">
          <el-input v-model="form.eccentricity"></el-input>
        </el-form-item>
        <el-form-item label="Perigee status">
          <el-select  v-model="form.status">
            <el-option :value="0" label="Disable">Disable</el-option>
            <el-option :value="1" label="Enable">Enable</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Perihelion Argument">
          <el-input v-model="form.perihelion"></el-input>
        </el-form-item>
        <el-form-item label="Period Circle">
          <el-input v-model="form.periodCircle"></el-input>
        </el-form-item>
        <el-form-item label="Width">
          <el-input v-model="form.clothWidth"></el-input>
        </el-form-item>
        <el-form-item label="Orbit color">
          <el-color-picker v-model="form.orbitalColor" show-alpha></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="item-btn">
      <el-button type="info" @click="cancel">Cancel</el-button>
      <el-button type="primary" @click="onSubmit">Save</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {

    };
  },
  methods: {
    onSubmit() {
      if(this.form.clothWidth===''||this.form.clothWidth===0){
        this.$message.warning("Width cannot be empty");
        return
      }
      this.$emit("submit",this.form)
    },
    cancel() {
      this.$emit("close");
    }
  }
};
</script>

<style scoped lang="scss">
.editDialog {
  width: 45%;
  height: 80vh;
  padding: 10px 15px;
  background: url("~@/assets/imgs/dialog.png") no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  z-index: 99;
  box-sizing: border-box;

  .top-title {
    width: 100%;
    height: 39px;
    margin-bottom: 15px;
    background: rgba(7, 16, 25, 0.53);
    border-radius: 4px 4px 0px 0px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;

    .close {
      cursor: pointer;
    }
  }
}

.content {
  max-height: 85%;
  overflow-y: auto;
  padding-left: 10px;
}

.line-item {
  display: flex;
  justify-content: stretch;
  align-items: center;

  ::v-deep .el-form-item__content {
    margin-left: 0px !important;
    width: 100%;

  }

}
::v-deep .el-form .el-form-item .el-input, .el-form .el-form-item .el-select, .el-form .el-form-item .el-date-editor--timerange{
  margin-left: 0px !important;
  width: 100%;
}
.item-btn {
  display: flex;
  justify-content: right;
  margin-bottom: 15px;
  margin-right: 10px;
}
:deep(.el-input__inner){

  background: #18191E;
  border-radius: 4px;
  border: 1px solid #5D5E67;
}
:deep(.el-input.is-disabled .el-input__inner) {

  background: #2E3038 !important;
  border-radius: 4px;
  border: 1px solid #5D5E67;
}
@media only screen and (min-width: 960px) and (max-width:1300px){
  /* 在计算机屏幕中宽度在[960px,1200px]区间会应用里面的样式 */
  .content{
    max-height: 80%;
    overflow-y: auto;
    padding-left: 10px;
  }
}

</style>
